<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import SunComponent from '@/components/SunComponent.vue'
import BackButton from '@/components/BackButton.vue'
import WarnIcon from '@/components/icons/WarnIcon.vue'
import LadderIcon from '@/components/icons/LadderIcon.vue'
import CoinIcon from '@/components/icons/CoinIcon.vue'
import showMsg from '@/utils/showMsg'
import { removeLogin } from '@/utils/auth'
import fetchCoin from '@/utils/fetchCoin'
import BackgroundImage from '@/components/BackgroundImage.vue'

const coins = ref(0)
const route = useRoute()
const router = useRouter()
const part = ref('')
const tableData = ref([
  // {
  //   date: '2016-05-03',
  //   start: '11:30',
  //   end: '15:30',
  //   len: '4小时2分20秒',
  //   accuracy: '90%'
  // }
])

onMounted(async () => {
  // 如果 part 的值是1、2、3，则有效，如果不是，则跳转到选择页面
  if (!['1', '2', '3'].includes((part.value = route.query.part)))
    router.push({ name: 'data-select' })
  else {
    try {
      coins.value = await fetchCoin()
      const response = await axios.get(
        route.query.part === '3' ? '/api/north/part/three/summary' : '/api/north/record/summary',
        {
          headers: {
            Authorization: localStorage.getItem('token')
          },
          params: {
            part: route.query.part,
            pageSize: '10000'
          }
        }
      )
      const { code, rows } = response.data
      if (code === 401)
        showMsg({
          type: 'error',
          msg: '登录过期，请重新登录',
          duration: 1000,
          onClose: () => {
            removeLogin()
            router.push({ name: 'login' })
          }
        })
      else if (code === 200) {
        rows.map((item) => {
          tableData.value.push({
            date: item.date,
            start: (item.beginTime && item.beginTime.slice(-8, -3)) || '',
            end: (item.endTime && item.endTime.slice(-8, -3)) || '',
            len: (() => {
              let hours, mins, secs
              item.duration &&
                ((hours = parseInt(item.duration.slice(0, 2))),
                (mins = parseInt(item.duration.slice(3, 5))),
                (secs = parseInt(item.duration.slice(6, 8))))
              return (
                (item.duration &&
                  `${hours > 0 ? `${hours}小时` : ''}${mins > 0 ? `${mins}分钟` : ''}${secs > 0 ? `${secs}秒 ` : ''}`) ||
                ''
              )
            })(),
            accuracy: item.accuracy === null ? '' : `${parseInt(item.accuracy * 100)}%`
          })
        })
      } else throw new Error()
    } catch (e) {
      console.log(e)
      showMsg({
        type: 'error',
        msg: '网络错误，请稍后重试'
      })
    }
  }
})
</script>
<template>
  <div class="container">
    <background-image />
    <div class="coin">
      <coin-icon :size="64" />
      <span style="font-size: 36px; margin-left: 8px; color: white">{{ coins }}</span>
    </div>
    <back-button
      style="position: absolute; top: 20px; left: 20px; z-index: 101"
      @click="router.push({ name: 'data-select' })"
    />
    <sun-component class="sun" />
    <div class="center">
      <div class="train">
        <div class="engine-front">
          <div class="chimney">
            <div class="smoke"></div>
            <div class="smoke smoke-2"></div>
            <div class="smoke smoke-3"></div>
            <div class="smoke smoke-4"></div>
          </div>
        </div>
        <div class="engine-body"></div>
        <div class="compartment fuel-compartment">
          <warn-icon :size="48" />
          <ladder-icon :size="60" />
        </div>
        <div class="compartment wagon-compartment">
          <div class="compartment-window"></div>
        </div>
        <div class="compartment tail-compartment">
          <div class="compartment-no-window"></div>
          <div class="tail"></div>
        </div>
        <div class="wheel-holder">
          <div class="wheel"></div>
          <div class="wheel wheel-2">
            <div class="wheel-joint"></div>
            <div class="wheel-joint wheel-joint-2"></div>
          </div>
          <div class="wheel wheel-3"></div>
          <div class="wheel wheel-4"></div>
          <div class="wheel wheel-5"></div>
          <div class="wheel wheel-6"></div>
          <div class="wheel wheel-7"></div>
          <div class="wheel wheel-8"></div>
          <div class="wheel wheel-9"></div>
        </div>
      </div>
      <div class="bridge"></div>
    </div>
    <div class="content">
      <h1 style="text-align: center; font-size: 80px">PART {{ part }}</h1>
      <div
        class="base-border"
        style="flex: 1; display: flex; align-items: baseline; overflow: scroll"
      >
        <table style="width: 100%; margin-top: 0; padding: 0 16px">
          <tr>
            <th>日期</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>时长</th>
            <th v-if="route.query.part !== '3'">正确率</th>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.date }}</td>
            <td>{{ item.start }}</td>
            <td>{{ item.end }}</td>
            <td>{{ item.len }}</td>
            <td v-if="route.query.part !== '3'">{{ item.accuracy }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import '@/styles/base-train.css';

.sun {
  top: 10%;
  left: 20%;
  position: absolute;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  padding: 0 40px 80px 40px;
}

.buttons {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.base-border {
  background-color: #ffe2b3;
  border: 6px solid #f55a36;
  font-size: 28px;
  border-radius: 20px;
}

.coin {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

th,
td {
  text-align: center;
}
</style>
